Handle Dark Light Themes The Right Way

#css #style #theme #darkmode

Respect a user's system settings by setting up your CSS in a dynamic way.

Conflicts

Sometimes a website owner wants their site to be defaulted to #darkmode (even if the the user prefers a #lighttheme). With this logic, you can still have the site default to the owner's preferred theme, but give the user an option to flip back to a light theme with those trendy theme switcher buttons

:root {
  --base: #cfcfcf;
  --text: #212121;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #212121;
    --text: #cfcfcf;
  }
}

html {
  color-scheme: dark light;
}
/* CSS-only solution using :has()
   the JS version is commented out lower down */
:root:has(#theme [value="☀️"]:checked) {
  color-scheme: light;
  --base: #cfcfcf;
  --text: #212121;
}

:root:has(#theme [value="🌑"]:checked) {
  color-scheme: dark;
  --base: #212121;
  --text: #cfcfcf;
}

body {
  color: var(--text);
  background-color: var(--base);
}

body {
  font-family: system-ui;
  font-size: 1.5rem;
}

input,
select {
  font: inherit;
}

.with-scrollbar {
  height: 300px;
  border: 5px solid hsl(0 0 50% / 0.5);
  overflow-y: scroll;
}

/* Use the two selectors below if you want the JS version
[data-theme="☀️"] {
  color-scheme: light;
  --base: #cfcfcf;
  --text: #212121;
}

[data-theme="🌑"] {
  color-scheme: dark;
  --base: #212121;
  --text: #cfcfcf;
} */

Credits